<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旗帜软件工作室统一授权中心</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="shortcut icon" href="./img/favicon.ico" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="whole">
    <!--    登录-->
    <div class="login" v-show="show3">
        <div class="content">
            <div class="header">
                <h1>旗帜软件工作室统一授权中心</h1>
                <h2>欢迎登录</h2>
            </div>
            <div class="register">
                没有账号？<el-button type="text" @click="register1">点击注册</el-button>
            </div>
            <div class="inputone">
                <el-form :model="ruleForm" ref="dynamicValidateForm" label-width="0px" class="demo-dynamic">
                    <el-form-item
                            prop="email">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名" ref="adminname"></el-input>
                    </el-form-item>
                    <el-form-item
                            prop="pass">
                        <el-input placeholder="请输入密码" v-model="ruleForm.pass" show-password ref="adminword"></el-input>
                    </el-form-item>
                <div class="forget">
                    <el-button type="text" @click="forget">忘记密码?</el-button>
                </div>
                    <div class="remember">
                        <input type="checkbox" name="remember" id="me" style="width: 14px;height: 14px"><label for="me">记住我</label>
                    </div>
                <el-button type="primary" @click="homepageClick" class="denglu">登录</el-button>
                </el-form>
            </div>
        </div>
    </div>
    <!--    :close-on-click-modal="false"-->
    <div>
        <el-dialog title="找回密码" :visible.sync="dialogFormVisible2"
                   width="400px" height="60" style="margin-top: -80px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item
                        prop="email"
                        label="邮箱"
                        :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                >
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="验证码" >
                    <!--          <div>-->
                    <el-input v-model="form.code" autocomplete="off"></el-input>
                    <el-button v-show="show" @click="getCode" style="width: 112px">获取验证码</el-button>
                    <el-button v-show="!show" class="count" :disabled="disabled" style="width:112px;margin-left: 0">{{count}} s</el-button>
                    <!--          </div>-->
                </el-form-item>
                <el-form-item label="新密码" prop="passs">
                    <el-input type="password" v-model="form.passs" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="checkPasss">
                    <el-input type="password" v-model="form.checkPasss" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="findPass">确定</el-button>
            </div>
        </el-dialog>
    </div>
    <!--    注册页面-->
    <div class="login11" v-show="show4">
        <div class="content1">
            <div class="header1">
                <h2>欢迎注册</h2>
            </div>
            <div class="register11">
                已有账号？<el-button type="text" @click="login3">点击登录</el-button>
            </div>
            <div class="inputone1">
                <el-form :model="ruleForm1" ref="dynamicValidateForm" label-width="0px" class="demo-dynamic">
                    <el-form-item>
                        <el-input v-model="ruleForm1.username" placeholder="请输入用户名" ref="adminname"></el-input>
                    </el-form-item>
                    <el-form-item
                            prop="email"
                            label=""
                            :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                    >
                        <el-input v-model="ruleForm1.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="ruleForm1.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="pass">
                        <el-input type="password" v-model="ruleForm1.pass" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="checkPass">
                        <el-input type="password" v-model="ruleForm1.checkPass" autocomplete="off" placeholder="请再次确认密码"></el-input>
                    </el-form-item>
                    <el-form-item class="end">
                        <input type="text" v-model="ruleForm1.code1" placeholder="请输入验证码" class="yanone1" style="outline: #b0b0b0 none;">
                        <el-button class="yantwo1" style="outline:none;text-align: center" v-show="show1" @click="getCode1">获取验证码</el-button>
                        <el-button class="yantwo1 count kuang" style="outline:none" disabled v-show="!show1">{{counts}}s</el-button>
                    </el-form-item>
                    <el-form-item class="end">
                        <el-button type="primary" @click="login3Click" class="zhuceOne1">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    new Vue({
        el:'#app',
        data : function () {
            //登录时忘记密码的密码验证
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.form.checkPasss !== '') {
                        this.$refs.form.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.passs) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            // 注册
            var validatePass1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm1.checkPass !== '') {
                        this.$refs.ruleForm1.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass21 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm1.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                disabled: true,
                show3 : true,
                show4 : false,
                //登录
                ruleForm: {
                    username:'',
                    pass:''
                },
                //注册
                ruleForm1 : {
                    username:'',
                    email : '',
                    phone : '',
                    pass: '',
                    checkPass: '',
                    code1 :'',
                },
                //code1为注册验证码
                show: true,
                count: '',
                timer: null,
                counts:'',
                show1:true,
                timers: null,
                dialogFormVisible2 : false,
                //忘记密码
                form : {
                    email : '',
                    //该code为忘记密码验证码
                    code : '',
                    passs:'',
                    checkPasss:''
                },
                //登录的密码确定规则
                rules: {
                    passs: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPasss: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                },
                //注册的密码确定规则
                ruless: {
                    pass: [
                        { validator: validatePass1, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass21, trigger: 'blur' }
                    ],
                }
            }
        },
        mounted() {

        },
        methods:{
            register1() {
                this.show3 = false
                this.show4 = true
            },
            login3() {
                this.show4 = false
                this.show3 = true
            },
            forget() {
                this.form.email=''
                this.form.code =''
                this.form.passs=''
                this.form.checkPasss=''
                this.dialogFormVisible2 = !this.dialogFormVisible2
            },
            homepageClick() {
                if (this.ruleForm.email ==='123@qq.com' && this.ruleForm.pass === '123') {
                    this.$message({
                        type: 'success',
                        message: '登录成功!'
                    })
                    window.location.href="center.html"
                }else {
                    this.$message.error('登录失败,您的输入有误')
                }
            },
            getCode(){},
            login3Click(){},
            findPass(){},
            getCode1(){},
        },
        created() {

        }

    })
</script>
</body>
</html>
